<template>
	<el-cascader filterable :placeholder="item.hint" class="width-full width-full__cascader" @visible-change="handleVisible" ref="field" :disabled="disabled" :clearable="true" :props="{value: 'id', label: 'fullname', children: 'children'}" :value="value" @change="changeValue" :options="options">
	</el-cascader>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import { deepRegion } from '@/afterSales/utils/common';
import widgetCommon from '../common/widgetCommon';
// import { AppModule } from '@/store/modules/app';

@Component({
  components: {}
})
export default class extends Mixins(widgetCommon) {
  [x: string]: any;
  private areaOptions: any = [] // 地区数据
  private get options () {
    return deepRegion(this.areaOptions, 1, this.item.regionType);
    // return deepRegion(this.areaOptions, 1, this.item.regionType);
    // return deepRegion(this.$store.state.app.region, 1, this.item.regionType);
  }

  public mounted () {
    this.$getCache('/base/action/general/cache/query', ['region'], false).then(res => {
      if (Object.keys(this.$store.state.common.publicCache.region).length) {
        this.areaOptions = Object.freeze(this.$store.state.common.publicCache.region?.result)
      }
    })
  }

  private handleVisible (visible) {
    this.$nextTick(() => {
      if (!visible) {
        this.blur();
      }
    });
  }
}
</script>
